import React from 'react';
import { PageContainer } from '@ant-design/pro-layout';
import { Form, Input, Button } from 'antd';

const FormItem = Form.Item;
export default () => {
  const [form] = Form.useForm();
  console.log('form', form);
  const onFinish = (values) => {
    console.log('values', values);
  };
  const onReset = () => {
    form.resetFields();
  };

  const onFill = () => {
    form.setFieldsValue({
      username: 'admin',
      password: '0000',
    });
  };
  return (
    <PageContainer>
      <Form form={form} onFinish={onFinish}>
        <FormItem
          label="用户名"
          name="username"
          rules={[
            {
              required: true,
              message: 'Please input your username!',
            },
          ]}
        >
          <Input />
        </FormItem>
        <FormItem
          label="密码"
          name="password"
          rules={[
            {
              required: true,
              message: 'Please input your password!',
            },
          ]}
        >
          <Input />
        </FormItem>
        <FormItem>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
          <Button htmlType="button" onClick={onReset}>
            Reset
          </Button>
          <Button type="link" htmlType="button" onClick={onFill}>
            Fill form
          </Button>
        </FormItem>
      </Form>
    </PageContainer>
  );
};
